<!-- nav专家指导组件 -->
<template>
  <!-- 专家指导页面容器 -->
  <div class="home-guide-container">
    <!-- 左侧指导内容区域 -->
    <div class="left-guide">
      <!-- 引入指导资源组件，传递数据和绑定事件 -->
      <guide-source
        :cgoods="goods"
        :pageSize="pageSize"
        :url="url"
        :total="total"
        @handleSearch="handleSearch"
        @pageClick="pageClick"
      ></guide-source>
    </div>
    <!-- 右侧专家相关区域 -->
    <div class="right-guide">
      <!-- 非管理员和专家用户显示操作按钮 -->
      <div class="btn-content" v-if="!$store.getters.isAdmin&&!$store.getters.isExpert">
        <a @click="AllExBtn" style="cursor: pointer;">在线问答</a> |
        <a @click="AllExBtn" style="cursor: pointer;">专家预约</a>
      </div>
      <!-- 专家列表部分 -->
      <div class="professioner-item">
        <!-- 专家列表标题和更多专家链接 -->
        <div style="font-size:18px;display: flex;justify-content: space-between;">
          <strong>专家列表</strong>
          <a style="font-size:12px;cursor: pointer;" @click="AllExBtn">更多专家>></a>
        </div>
        <!-- 循环渲染专家信息 -->
        <div class="expert" v-for="(item,index) in expertArray" :key="index" :style="index===expertArray.length-1?'':'border-bottom: 1px dashed #f2f2f2;'">
          <!-- 专家头像 -->
          <img :src="$store.state.imgShowRoad + '/file/' + 'experta.png'" alt="" />
          <!-- 专家详细信息 -->
          <div class="info">
            <div class="item-style">
              <!-- 显示专家姓名 -->
              <div class="content">专家姓名：{{item.realName}}</div>
              <!-- 显示专家职称 -->
              <div class="content">职称：{{item.position}}</div>
            </div>
            <div class="item-style">
              <!-- 显示专家从事专业 -->
              <div class="content">从事专业：{{item.profession}}</div>
              <!-- 显示专家电话 -->
              <div class="content">电话：{{item.phone}}</div>
            </div>
            <!-- 显示专家所属单位 -->
            <div class="item-content">单位：{{item.belong}}</div>
            <!-- 非管理员和专家用户显示操作按钮 -->
            <div class="item-btn">
              <div class="btn-item" @click="handleQuestion(item)" v-if="!$store.getters.isAdmin&&!$store.getters.isExpert">去提问</div>
              <div class="btn-item" @click="handleAppointment(item)" v-if="!$store.getters.isAdmin&&!$store.getters.isExpert">去预约</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入获取问题列表和专家列表的 API
import { selectQuestions,selectExpert } from "@/api/order";
// 引入指导资源组件
import GuideSource from "../../../components/expert/ExpertGuideSource.vue";

export default {
  data() {
    return {
      goods: [], // 问题列表数据
      total: 0, // 问题列表总数量
      searchValue: '', // 搜索关键词
      pageSize: 30, // 每页显示问题数量
      url: "/order/goods/", // 获取问题列表的 API 地址
      expertCount: 1, // 当前专家列表页码
      // 当前问题列表页码，优先从 sessionStorage 获取
      guideCount: sessionStorage.getItem("/order/goods/pageCode")
        ? sessionStorage.getItem("/order/goods/pageCode")
        : 1,
      expertArray: [] // 专家列表数据
    };
  },
  created() {
    // 若 token 为空，弹出提示
    if (this.$store.state.token === "") {
      alert("xxx");
    }
    // 更新导航栏激活索引
    this.$store.commit("updateActiveIndex", "5");
    // 获取问题列表数据
    this.getData();
    // 获取专家列表数据
    this.getExpertData();
  },
  methods: {
    // 页码点击事件，更新问题列表
    pageClick(item) {
      this.goods = item;
    },
    // 跳转全部专家页面
    AllExBtn() {
      this.$router.push("/home/allExpert").catch((err) => err);
    },
    // 搜索事件，更新搜索词并获取数据
    handleSearch(val) {
      this.searchValue = val;
      this.getData();
    },
    // 获取问题列表数据
    getData() {
      selectQuestions({
        pageNum: this.guideCount,
        keys: this.searchValue
      }).then((res) => {
        if (res.flag === true) {
          // 更新问题列表和总数量
          this.goods = res.data.list;
          this.total = res.data.total;
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 获取专家列表数据
    getExpertData() {
      selectExpert({
        pageNum: this.expertCount,
        keys: this.searchValue
      }).then(res => {
        if (res.flag === true) {
          // 更新专家列表
          this.expertArray = res.data.list;
        } else {
          // 显示错误信息
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 去提问按钮点击事件
    handleQuestion(item) {
      if (localStorage.getItem('token')) {
        // 已登录，跳转提问页面
        this.$router.push(`/home/question?id=${item.userName}`).catch((err) => err);
      } else {
        // 未登录，提示并跳转登录页
        this.$message.error('请先登录');
        this.$router.push(`/login`).catch((err) => err);
      }
    },
    // 去预约按钮点击事件
    handleAppointment(item) {
      if (localStorage.getItem('token')) {
        // 已登录，跳转预约页面
        this.$router.push(`/home/appointment?id=${item.userName}`).catch((err) => err);
      } else {
        // 未登录，提示并跳转登录页
        this.$message.error('请先登录');
        this.$router.push(`/login`).catch((err) => err);
      }
    }
  },
  components: {
    GuideSource // 注册指导资源组件
  }
};
</script>

<style lang="less" scoped>
/* 专家指导页面容器样式 */
.home-guide-container{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* 左侧指导内容区域样式 */
  .left-guide {
    margin-top: 10px;
  }
  /* 右侧专家相关区域样式 */
  .right-guide{
    margin-top: 10px;
    /* 操作按钮区域样式 */
    .btn-content{
      background-color: rgba(156, 208, 188, 0.43);
      width:350px;
      text-align: center;
      font-size:18px;
      font-weight:bold;
      height: 40px;
      line-height: 40px;
    }
    /* 专家列表容器样式 */
    .professioner-item{
      background-color: #e3ece0;
      width:350px;
      font-size:12px;
      padding: 10px 20px;
      margin-top: 10px;
    }
  }
}

/* 专家信息项样式 */
.expert {
  min-height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  /* 专家头像样式 */
  img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 6px;
  }
  /* 专家信息排列样式 */
  .item-style{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  p {
    margin: 5px;
  }
  /* 专家信息内容样式 */
  .content{
    color: #27578d;
    font-size:12px;
    font-style:normal;
    width: 120px;
    line-height: 25px;
  }
  /* 专家单位信息样式 */
  .item-content{
    width: 220px;
    line-height: 25px;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 用省略号替代超出部分 */
    text-overflow: ellipsis;
    word-break: break-all;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制显示行数 */
    -webkit-line-clamp: 2;
    /* 设置子元素排列方式 */
    -webkit-box-orient: vertical;
  }
  /* 操作按钮区域样式 */
  .item-btn{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
    color: #27578d;
    /* 操作按钮样式 */
    .btn-item{
      margin-left: 10px;
      cursor: pointer;
      &:hover{
        text-decoration: underline;
        color: #480b3d;
      }
    }
  }
}
</style>